<template>
   
     <v-layout class="home-container">
         <!--侧边栏菜单区域-->
           <v-sider collapsible v-model="collapsed">
                <div class="logo"></div>
                <v-menu theme="dark" :mode="collapsed?'vertical':'inline'" :data="menulist">
                    <!-- 子菜单 -->
                    <template slot-scope="{data}">
                        <i v-if="data.icon" :class="'anticon anticon-' + data.icon" > </i>
                        <span :class="{'nav-text':data.icon}"   @click="saveNavState('/'+data.path)">{{data.name}}</span>
                    </template>
                    <template slot-scope="{data}" slot="sub" >
                        <i v-if="data.icon" :class="'anticon anticon-' + data.icon" ></i>
                        <span >{{data.name}}</span>
                    </template>
                </v-menu>
            </v-sider>
    
    <!--页面主体区-->
        <v-layout>
        <!--头部区域-->
        <v-header mode="horizontal" :style="{ background: '#fff', padding: 0,textAlign: 'right' }" >
               <v-button type="info" @click="logout"  icon="left"  >退出</v-button>
        </v-header>
        <!--右边内容主体-->
            <v-content :style="{ padding: '50px 50px' }">
                <div style="padding: 24px; background: #fff; min-height: 100%;">
                    <router-view>
                           
                    </router-view>
                </div>
            </v-content>
        </v-layout>
     </v-layout>
</template>

<script>
export default {
    data(){
        return{
            //左侧菜单栏
          collapsed: false,
          menulist:[
            {name:"权限管理",
            icon:"user",
            children:[{name:"管理员权限",path:"users",id:11},{name:"查看权限",path:"right",id:12}],id:1 },
            {name:"小程序管理",
            icon:"appstore",
            children:[{name:"管理聊天室",path:"chatroom",id:21},{name:"管理用户",path:"user",id:22}],id:2},
            {name:"日志管理",
            icon:"calendar",
            children:[{name:"查看日志",path:"log",id:31}],id:3},
            {name:"数据管理",
            icon:"area-chart",
            children:[{name:"热榜",path:"data_log",id:41},{name:"分析数据",path:"analysis",id:42}],id:4}
          ],
         
           
        };
    },
    created(){
        // this.activePath=window.sessionStorage.getItem('activePath')
    },
    methods:{
        //退出
        logout(){
            this.$router.push("/login");
        },
        saveNavState(activePath){
            console.log("ok")
            console.log(activePath)
            var road=activePath
             this.$router.push(road);
            window.sessionStorage.setItem('activePath',activePath);
            this.activePath=activePath;
        }
    }
}
</script>
<style lang="less" scoped>
.home-container{
    height: 100%;
}
.v-header{
    background-color: #46A7DC;
    display: flex;
    justify-content: space-between;
    padding-left : 0 ;
    align-items: center;
    color: #fff;
    font-size: 20px;
    div{
        display: flex;
        align-items: center;
        span{
            margin-left: 15px;
        }
    }
}



</style>